<template>
	<view>
		<view class="flex margin-sm" id="topBox">
			
				<view @tap="toPage(pageName[0])" class="flex-sub bg-white padding-top-lg margin-xs text-center home-item">
					<image src="https://pic4.zhimg.com/v2-12e282d5fc7073140a62377eb453728f_1440w.jpg" mode="aspectFit"></image>
					<view class="padding">数据结构</view>
				</view>
				<view @tap="toPage(pageName[1])" class="flex-sub bg-white padding-top-lg margin-xs text-center home-item">
					<image src="https://dss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=942649840,3847768297&fm=85&app=92&f=JPEG?w=121&h=75&s=62B21CC5C225BF4F143CD5320300F040" mode="aspectFill"></image>
					<view class="padding">计算机组成原理</view>
				</view>
		
		</view>	
		<view class="flex margin-sm margin-top">
			
				<view @tap="toPage(pageName[2])" class="flex-sub bg-white padding-top-lg margin-xs text-center home-item">
					<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593505191432&di=1c5d838f1f0c05376c5f08b69d0e7ca0&imgtype=0&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D1893207556%2C1054268707%26fm%3D214%26gp%3D0.jpg" mode="aspectFill"></image>
					<view class="padding">计算机网络</view>
				</view>
				<view @tap="toPage(pageName[3])" class="flex-sub bg-white padding-top-lg margin-xs text-center home-item">
					<image src="https://edu-image.nosdn.127.net/2FBF2643E1153A9C7CEA9F5D0B0CD3D6.jpg?imageView&thumbnail=426y240&quality=100" mode="aspectFit"></image>
					<view class="padding">操作系统</view>
				</view>
		
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageName: ['data_structure','computer_organization','computer_networks','operating_system'],
			}
		},
		methods: {
			toPage(pageName) {
				console.log(pageName)
				uni.navigateTo({
				    url: `../home/cs/${ pageName }`
				});
			}
		}
	}
</script>

<style>
#topBox {
	margin-top: 40px;
}
</style>
